<template>
  <div class="image-wrapper">

    <div style="width: 70px;">
          <img width="60" height="60" :src="goback" alt="file icon" @dblclick="imageClick(currentFolder)" />
    </div>
    <template v-for="item in fileList" :key="item.name" class="image-item">
        <!-- 如果是文件，显示文件图标和名称 -->
        <div style="width: 120px;" v-if="item.field === '文件'">
          <img width="60" height="60" style="display:block;text-align:center;margin: 0 auto;" :src="getIcon('file')" alt="file icon" @dblclick="imageClick(item.href)" />
          <el-tooltip
        class="box-item"
        effect="dark"
        :content=" item.title"
        placement="top-start"
      >
          <el-text width="120" truncated style="display: block;width: 120px;" class="image-name ">{{ item.title }}</el-text>
        </el-tooltip>
        </div>
        <!-- 如果是文件夹，显示文件夹图标和名称 -->
        <div style="width: 120px;" v-else-if="item.field === '文件夹'">
          <img  width="60" height="60" style="display:block;text-align: center;margin: 0 auto;" :src="getIcon('folder')" alt="folder icon" @dblclick="imageClick(item.href)"/>
          <el-text width="120" truncated style="display: block;width: 120px;" class="image-name ">{{ item.title }}</el-text>
        </div>
        <!-- 如果类型未知，可以显示默认图标和名称 -->
        <div style="width: 120px;" v-else>
          <img width="60" height="60" style="display:block;text-align: center;margin:0 auto" :src="getIcon('default')" alt="default icon" @dblclick="imageClick(item.href)"/>
          <el-tooltip
        class="box-item"
        effect="dark"
        :content=" item.title"
        placement="top-start"
      >
          <el-text  truncated style="display: block;width: 120px;" class="image-name ">{{ item.title }}</el-text>
          </el-tooltip>

        </div>
    </template>
 

  </div>
</template>


<style>
.image-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 间距大小，根据需要调整 */
}
.image-item {
  width: calc(33.33% - 10px); /* 每个元素的宽度，考虑间距 */
  box-sizing: border-box;
  text-align: center; /* 居中显示 */
  display: flex;
  flex-direction: column; /* 切换为纵向布局 */
}

.image-name {
  margin-top: 5px; /* 名称和图片之间的间距，根据需要调整 */
  font-size: 14px; /* 名称字体大小，根据需要调整 */
  color: #333; /* 名称字体颜色，根据需要调整 */
  text-align: center;
}
</style>

<script>

import axios from 'axios';
import http from '@/api/http.js'
import filepng from '@/assets/imgs/file.png';
import folderpng from '@/assets/imgs/folder.png';
import goback from '@/assets/imgs/goback.png';
import { ElText,ElTooltip } from 'element-plus';

const path = require('path');

export default {
  data() {
    //表单验证时根据remove判断是否有图片
    return {
      fileList: [],
    currentFolder:"",
    goback:goback
    }
  },
  mounted(){
    this.fetchRemoteFiles(null);
  },
  methods: {
    async fetchRemoteFiles(param) {
      try {
        if(param==null ||param==undefined){
          this.currentFolder="";
        }
        else if(param==""){
          this.currentFolder=param;
        }
      else{
        const parentPath = path.join(param, '..');
          this.currentFolder=parentPath;
      }
        // 使用axios发送GET请求，替换为你的后端API地址
        const response = await axios.post(this.http.ipAddress+'api/upper_ftpmachiningcenter/GetFileList', param, {  
  headers: {  
    'Content-Type': 'application/json'  
  }  
});
        // 假设后端返回的数据结构为 { files: [...] }
        this.fileList = response.data;
      } catch (error) {
        console.error('Failed to fetch remote files:', error);
      }
    },
    imageClick(path){
      this.fetchRemoteFiles(path);
    },
    getIcon(type) {
      // 根据文件类型返回相应的图标路径
      if (type === 'file') {
        return filepng; // 替换为实际的文件图标路径
      } else if (type === 'folder') {
        return folderpng; // 替换为实际的文件夹图标路径
      } else {
        return filepng; // 如果类型未知，可以使用默认图标
      }
    },
  },
};
</script>